<template>
  <!-- 热门城市 -->
  <div>
    <van-nav-bar
      title="城市选择"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 这里的nowCity数据可能是主页传来的数据 -->
    <van-index-anchor>当前定位</van-index-anchor>

    <van-cell :title="nowCity" @click="clickNow"></van-cell>

    <van-index-anchor>热门城市</van-index-anchor>
    <div
      v-for="(item, index) in hotList"
      :key="index"
      @click="clickHot(item.label)"
    >
      <van-cell :title="item.label"></van-cell>
    </div>

    <!-- //全部城市 -->

    <van-index-bar :index-list="indexList">
      <div v-for="(item, index) in list" :key="index">
        <van-index-anchor :index="item.index">{{
          item.index
        }}</van-index-anchor>
        <van-cell
          :title="obj.cityName"
          v-for="(obj, cindex) in item.list"
          :key="cindex"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, getHotCity, getCityInfo } from "@/api/area.js";
import { setId, getId, removeId } from "@/utils/auth.js";

export default {
  name: "CityList",
  data() {
    return {
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "Q",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      level: 1,
      list: [],
      hotList: [],
      nowCity: JSON.parse(getId('vue-token'))?JSON.parse(getId('vue-token')).label:'北京'  ,
    };
  },
  created() {
    this.getCity();
    this.getHotCity();
  },
  methods: {
    async getCity() {
      //请求数据
      let { body } = await getCity(this.level);
      // console.log(body);

      // 加工数据
      var params = body;
      var cityList = [];
      //        城市列表
      // [{index:A,list:[{cityId:"",cityName:""},{cityId:"",cityName:""},{cityId:"",cityName:""}]}] []*/

      for (var i = 0; i < params.length; i++) {
        var letterFirst = params[i].pinyin.substr(0, 1).toUpperCase();

        // console.log(letterFirst);

        if (isCityList(letterFirst)) {
          for (var k = 0; k < cityList.length; k++) {
            if (letterFirst == cityList[k].index) {
              cityList[k].list.push({
                cityId: params[i].value,
                cityName: params[i].label,
              });
              break;
            }
          }
        } else {
          cityList.push({
            index: letterFirst,
            list: [
              {
                cityId: params[i].value,
                cityName: params[i].label,
              },
            ],
          });
        }
      }
      //判断当前标识是否在cityList当中
      function isCityList(letterFirst) {
        var bStop = false;
        for (var i = 0; i < cityList.length; i++) {
          if (cityList[i].index == letterFirst) {
            bStop = true;
            break;
          }
        }

        return bStop; //存在为true 不存在未false
      }
      //     //排序
      cityList.sort((item1, item2) => {
        if (item1.index > item2.index) {
          return 1;
        } else {
          return -1;
        }
      });
      this.list = cityList;
      // console.log(cityList);
    },
    async getHotCity() {
      let { body } = await getHotCity();
      this.hotList = body;
    },
    async clickHot(name) {
      //  获取到数据给主页使用
      let { body } = await getCityInfo(name);
      
      this.nowCity = body.label;
      //  this.$emit('city', this.nowCity);
      //  console.log(body);
      // this.$router.push({name:'home',params:{id:body.value}})

      if (getId("vue-token") === []) {
        setId(JSON.stringify(body));
        this.$router.push("/");
      } else {
        
        removeId("vue-token");
        
        setId(JSON.stringify(body));

        this.$router.back();
      }
    },
    clickNow() {
      this.onClickLeft();
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style>
.van-index-bar__index {
  padding-top: 30px;
}
.van-index-anchor {
  color: #999999;
}
</style>
